<#import "/common/base.ftl" as base/>
<#import "/common/button.ftl" as but/>
<#import "/common/tableOpt.ftl" as tabt/>
<#import "/common/widget.ftl" as widget/>
<#assign jses=[
"/js/service/sendto.js",
				"/js/app/sendto.js"] in base/>
<#assign csses=["/webjars/1.0.0/css/colors.css"] in base/>
<@base.page "">
<!-- -->
<div class="grid-content bg-purple-light">
	<el-col :span="24" class="content-wrapper">
		<section>
			<el-col :span="24" class="toolbar">
				<el-row>
					<el-button type="success" plain size="small" icon="el-icon-plus" @click="add()" >添加</el-button>
					<el-button type="warning"  plain size="small" icon="el-icon-refresh" @click="refresh()">刷新</el-button>
					<el-button plain type="danger" size="small" icon="el-icon-switch-button" @click="restart()">重启</el-button>
					<span style="color: red;margin-left: 18px">保存后需重启服务，否则配置不生效。</span>
				</el-row>
<!--				v-loading="tableVm.loading"-->
				<!--表格-->
				<el-table ref="multipleTable" stripe :data="tableVm.data" border style="width: 100%" :cell-class-name="filterClass">
					<el-table-column prop="ip" label="远端服务器IP"  min-width="100" show-overflow-tooltip></el-table-column>
					<el-table-column prop="port" label="端口"  min-width="100" show-overflow-tooltip></el-table-column>
					<el-table-column prop="mode" label="数据格式"  min-width="100" show-overflow-tooltip></el-table-column>
					<el-table-column prop="dataType" label="类型"  min-width="100" show-overflow-tooltip :formatter="formatterType"></el-table-column>
					<el-table-column prop="times" label="输出间隔（s）"  min-width="100" show-overflow-tooltip></el-table-column>
					<el-table-column prop="status" label="发送状态"  min-width="100" show-overflow-tooltip :formatter="formatterStatus">
					</el-table-column>
					<el-table-column prop="charset" label="编码"  min-width="100" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="remark" label="描述"  min-width="100" show-overflow-tooltip></el-table-column>
					<el-table-column label="操作"  min-width="300">
						<template scope="scope">
							<@tabt.edit "edit(scope.$index,scope.row)" />
							<@tabt.delete "deleteRow(scope.$index,scope.row)" />
						</template>
					</el-table-column>
				</el-table>
				<div class="block">
					<el-pagination  @current-change="handleCurrentChange" :current-page="tableVm.pageIndex" :page-size="tableVm.pageSize" layout="prev, pager, next, jumper" :total="tableVm.total"></el-pagination>
				</div>
				<!--编辑界面-->
				<el-dialog :title="editVm.oprate" :visible.sync="editVm.visible" width="900px">
					<el-form :model="editVm.data" label-width="150px" :rules="editVm.editFormRules.formRules" ref="editForm" >
						<el-row>
							<el-form-item label="远端服务器IP" prop="ip">
								<el-input v-model="editVm.data.ip" :disabled="!editVm.isEdit" maxlength="20" ></el-input>
							</el-form-item>
							<el-form-item label="端口" prop="port">
								<el-input-number v-model="editVm.data.port" :disabled="!editVm.isEdit" :min="80" :max="65535" :step="1"></el-input-number>
							</el-form-item>
							<el-form-item label="数据格式" prop="mode">
								<el-select v-model="editVm.data.mode" :disabled="!editVm.isEdit"  placeholder="请选择数据格式" style="width: 100%">
									<el-option v-for="item in options1" :value="item.value" :key="item.value" :label="item.label" style="width: 100%" ></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="数据类型" prop="dataType" >
								<el-select v-model="editVm.data.dataType" :disabled="!editVm.isEdit" style="width: 100%">
									<el-option v-for="item in options2" :value="item.value" :key="item.value" :label="item.label" style="width: 100%"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="编码" prop="charset">
									<el-select v-model="editVm.data.charset" :disabled="!editVm.isEdit" style="width: 100%" >
										<el-option v-for="item in options3" :value="item.value" :key="item.value" :label="item.label" style="width: 100%" ></el-option>
									</el-select>
							</el-form-item>
							<el-form-item label="输出间隔" prop="times"  v-if="editVm.data.dataType == 0"  class="is-no-asterisk">
								<div slot="label" style="margin-top: -9px;">
									<div>
										<span style="color:#F56C6C;">*</span>&nbsp;输出间隔</div>
									<div style="color: deepskyblue;margin-top: -21px">历史数据</div>
								</div>
								<el-input v-model="editVm.data.times" :disabled="!editVm.isEdit" maxlength="20" >
									<div slot="append">s</div>
								</el-input>
							</el-form-item>

							<el-form-item label="输出间隔" prop="times" v-if="editVm.data.dataType == 1" class="is-no-asterisk">
								<div slot="label" style="margin-top: -9px;">
									<div><span style="color:#F56C6C;">*</span>&nbsp;输出间隔</div>
									<div style="color: lightpink;margin-top: -21px">告警数据</div>
								</div>
								<el-input v-model="editVm.data.times" :disabled="!editVm.isEdit" maxlength="20">
									<div slot="append">s</div>
								</el-input>
							</el-form-item>


							<el-form-item label="描述" prop="remark">
								<el-input type="textarea" v-model="editVm.data.remark" :disabled="!editVm.isEdit" maxlength="20"></el-input>
							</el-form-item>
						</el-row>
					</el-form>
					<div solt="footer" class="dialog-footer">
						<@but.cancel "editVm.visible = false" />
						<@but.save "save(editVm)" 'v-if="editVm.isEdit" :loading="editVm.loading"'/>
					</div>
				</el-dialog>
			</el-col>
		</section>
	</el-col>

</div>
</@base.page>
